/*****************************************************************************
 * Menu
 */
// whole menu
.menu {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

// Style the row
.menu li {
  height: 40px;
  #gradient > .vertical(rgb(255,255,255), rgb(244,244,244));
  border-bottom-style: solid;
  border-bottom-color: darken(#eee,8%);
  border-bottom-width: 1px;
  position: relative;
  display: block;
}

// Style links inside row: block display so it expand to full row
.menu li div {
  text-decoration: none;
  display: block;
  height:100%;
  width:100%;
  cursor: pointer;
  display:block;
  text-indent: 10px;
  color: @gray;
}

.menu li div a {
  color: @gray;
  margin-top: 10px;
}

.menu li div button {
  margin: 5px;
}

// Change color when row is active
.menu li.active div {
  color: @white;
}

// Change color when hover link
.menu li div:hover {
  #gradient > .vertical(rgb(240,240,240), rgb(230,230,230));
}

// Change color to blue for active row
.menu li.active {
  #gradient > .vertical(rgb(55,156,224), rgb(32,108,168)); 
}

// Don't change to gray color for the active link
.menu li.active div:hover {
  #gradient > .vertical(rgb(55,156,224), rgb(32,108,168)); 
}
